<template>
  <ConfigProvider :locale="locale">
    <div class="mars-main-view" id="mars-main-view">
      <div id="centerDiv" class="centerDiv-container">
        <mars2d-map :url="props.mapUrl" :options="mapOptions" @onload="marsOnload" />
      </div>
      <template v-if="loaded">
        <mars-dialog class="tool-bar" :draggable="false" :visible="loaded" :animation="false" right="5" top="25">
          <Mars2dWidget :geo-url="props.geoUrl" ref="mars2dWidgetRef" @onSaveData="onSaveData"
            @onPropEditInfoShow="onPropEditInfoShow" />
        </mars-dialog>
      </template>
      <template v-if="propEditInfo.visible">
        <mars-dialog :draggable="false" closeable v-model:visible="propEditInfo.visible" width="260" top="35" left="50"
          :minWidth="200">
          <GraphicEditor :graphic="propEditInfo.graphic" @onSave="onSaveInfo" />
        </mars-dialog>
      </template>
    </div>
  </ConfigProvider>
</template>

<script setup lang="ts">
/**
 * 渲染主入口
 * @copyright 火星科技 mars2d.cn
 * @author 火星吴彦祖 2022-02-19
 */
import zhCN from 'ant-design-vue/es/locale/zh_CN';
import { provide, Ref, ref, nextTick, inject } from 'vue';
import { ConfigProvider } from 'ant-design-vue';
import Mars2dMap from '@mars/components/mars-work/mars2d-map.vue';
import Mars2dWidget from './mars2d-widget.vue';
import GraphicEditor from '@mars/components/AreaGraphicEditor/index.vue'

const locale = zhCN;

const updatedGraphic = ref({});

const props = withDefaults(
  defineProps<{
    areaId?: string;
    mapOptions?: any;
    mapUrl?: string;
    geoUrl?: string;
  }>(),
  {
    mapOptions: () => ({}),
    // mapUrl: `${process.env.BASE_URL}config/config.json?time=${new Date().getTime()}`,
    // geoUrl: `${process.env.BASE_URL}config/geo.json?time=${new Date().getTime()}`,
    mapUrl: '',
    geoUrl: ''
  }
);

let mapInstance: any = null;
provide('getMapInstance', () => {
  return mapInstance;
});

const loaded = ref(false);
const emit = defineEmits(['onload', 'onSaveData', 'onSaveInfo']);
const marsOnload = (map: any) => {
  console.log('map构造完成', map);
  mapInstance = map;
  loaded.value = true;
  emit('onload', map);
};

const usePropEditInfo = () => {
  const propEditInfo = ref({
    visible: false,
    graphic: {},
  })
  const onPropEditInfoShow = (graphic) => {
    propEditInfo.value.visible = false
    nextTick(() => {
      propEditInfo.value = {
        visible: true,
        graphic,
      }
    });
  }
  return {
    propEditInfo,
    onPropEditInfoShow,
  }
}
const {
  propEditInfo,
  onPropEditInfoShow,
} = usePropEditInfo()

const onSaveData = (geojson: any) => {
  console.log('保存geojson', geojson);
  emit('onSaveData', geojson);
};
// const onSaveInfo = (formState: any) => {
//   console.log('保存formState', formState);

//   propEditInfo.graphic.options.name = formState.name
//   // emit('onSaveInfo', formState);
// };

// 定义一个接口来描述子组件暴露出来的方法
interface GraphicLayerAreaMethods2 {
  toUpdateGraphicMethod: (newStatus: any) => void;
}

const mars2dWidgetRef: Ref<GraphicLayerAreaMethods2 | null> = ref(null);

const onSaveInfo = (formState: any) => {
  console.log('保存formState', formState);
  if (mars2dWidgetRef.value) {
    mars2dWidgetRef.value.toUpdateGraphicMethod(formState)
  }
  // updatedGraphic.value = formState
  // let cmd = {
  //   areaId: areaId
  // }
  // updateGraphicDataList(formState)
};

</script>

<style lang="less" scoped>
.mars-main-view {
  height: 100%;
  width: 100%;
  position: relative;

  :deep(.mars-dialog) {
    padding-top: 10px !important;
    background-color: #fff;
  }

  :deep(.mars-dialog__header) {
    display: none;
  }
}

.centerDiv-container {
  height: 100%;
  width: 100%;
  overflow: hidden;
}

.tool-bar {
  position: absolute;
  background-color: #fff;
  right: 0;

  :deep(.mars-dialog__header) {
    display: none;
  }
}
</style>
